<template>
  <div>
     <video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
 
             >
  </video-player>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "https://assets.mixkit.co/videos/preview/mixkit-ballerina-dancing-in-an-abandoned-place-43202-large.mp4"
          }],
          // poster: "/static/images/author.jpg",
          
        }
    };
  },

  components: {},

  computed: {
     player() {
        return this.$refs.videoPlayer.player
      }
  },

  created() {},

  mounted() {},

  methods: {
     // listen event
      // onPlayerPlay(player) {
      //   // console.log('player play!', player)
      // },
      // onPlayerPause(player) {
      //   // console.log('player pause!', player)
      // },
      // // ...player event
 
      // // or listen state event
      // playerStateChanged(playerCurrentState) {
      //   // console.log('player current update state', playerCurrentState)
      // },
 
      // // player is ready
      // playerReadied(player) {
      //   console.log('the player is readied', player)
      //   // you can use it to do something...
      //   // player.[methods]
      // }
    }
  
};
</script>
<style scoped lang="less">

</style>